<template>
	<!-- 任务执行管理详情 -->
	<div class="taskExecuteManageDetail">
		<CommonTitle titleName="项目概况">
			<template #rightCnBox>
				<div class="rightCnBox">
					<div class="rightcnItem">
						{{ state.taskName }}
					</div>
					<div class="rightcnItem">
						{{ state.mainProjectName }}
					</div>
					<div class="rightcnItem">项目编号： {{ state.tenderTaskId }}</div>
				</div>
			</template>
		</CommonTitle>

		<div class="basicInfo">
			<div class="title">基本信息</div>
			<div class="basicBox">
				<div class="basiItme">
					<div class="itemLable">招标任务负责人</div>
					<div class="itemContent">{{ state.userName }}</div>
				</div>
				<div class="basiItme">
					<div class="itemLable">招标任务来源</div>
					<div class="itemContent">{{ state.deptName }}</div>
				</div>
				<div class="basiItme">
					<div class="itemLable">任务来源</div>
					<div class="itemContent">
						{{ state.taskSource }}
						<!-- <span v-for="v in projectTaskList.deptList" :key="v.deptId">
              <span v-if="v.deptId ===state.taskSourceLink">{{ v.deptName }}</span>
            </span> -->
					</div>
				</div>
			</div>
		</div>

		<div class="content">
			<div class="title">{{ state.taskName }}</div>
			<div class="contentBox">
				<div class="colItem">
					<div class="timeBox">
						<div class="timeIcon">
							<svg-icon icon-class="project-detail-icon-10" class="icon" />
						</div>
						<div class="time_">
							<div class="item">
								{{ filtersTime(state.planStartTime) }} 至
								{{ filtersTime(state.planEndTime) }}
							</div>
							<div class="itemc">该招标项目任务计划实施期限</div>
						</div>
					</div>

					<div class="classio">
						<div class="classioItem">
							<div class="icon">
								<svg-icon
									icon-class="project-detail-icon-l-node"
									class="icon"
								/>
							</div>
							<div class="content_">
								<div class="top">
									<span>{{ state.completeFlowNum }}</span
									>/<span>{{ state.totalFlowNum }}</span>
								</div>
								<div class="butContent">流程节点数</div>
							</div>
						</div>
					</div>
					<div class="classio">
						<div class="classioItem">
							<div class="icon">
								<svg-icon icon-class="project-detail-icon-l-s" class="icon" />
							</div>
							<div class="content_">
								<div class="top">
									<span>{{ state.paidNoticeNum }}</span
									>/<span>{{ state.totalNoticeNum }}</span>
								</div>
								<div class="butContent">履约金账单书</div>
							</div>
						</div>
					</div>
					<div class="classio">
						<div class="classioItem contract_item" @click="handleContractOpen">
							<div class="icon">
								<svg-icon icon-class="project-detail-icon-l-ht" class="icon" />
							</div>
							<div class="content_">
								<div class="top">
									<span>{{ state.paidContractNum }}</span>
								</div>
								<div class="butContent">合同已结算账单数</div>
							</div>
						</div>
					</div>
				</div>
				<div class="contentBox_b">
					<div
						class="lia_t_top"
						style="display: flex; justify-content: space-around"
					>
						<div class="colItem2">
							<div class="item2">
								<!-- <span v-for="v in taskStatusOptions" :key="v.value">
									<span v-if="v.value == state.taskStatus">{{ v.label }}</span>
								</span> -->
							</div>
						</div>
						<div class="colItem3">
							<div class="item">
								<span>审核招标项目请示信息</span>
								<span class="icon_jt_b">
									<svg-icon icon-class="project-detail-icon-up" class="icon" />
								</span>
							</div>
						</div>
						<div>
							<span class="icon_jt_r">
								<svg-icon icon-class="project-detail-icon-left" class="icon" />
							</span>
						</div>
						<div class="colItem4">
							<div class="itemBox">
								<div class="item item_top">
									<div class="lia_top lia">
										<span class="lab"
											>项目类别:
											<span
												v-for="v in projectTaskList.options"
												:key="v.projectTypeId"
											>
												<span
													v-if="state.projectTypeExplain == v.projectTypeId"
													>{{ v.typeName }}</span
												>
											</span>
										</span>
										<span class="lab"
											>招标方式:
											<span
												v-for="v in competitiveBiddingStatusOptions"
												:key="v.value"
											>
												<span v-if="state.tenderTypeExplain == v.value">{{
													v.label
												}}</span>
											</span>
										</span>
										<span class="lab"
											>招标项目预估价:
											<span>{{ state.budgetControlAmount }}</span>
										</span>
										<span class="lab"
											>服务期限(工期):
											<span>
												{{ filtersTime(state.serviceStartTime) }} -
												{{ filtersTime(state.serviceEndTime) }}</span
											>
										</span>
										<!-- <span v-if="state.reference" class="lab"
											>邀请服务单位信息审批单:
											<span>
												{{state.reference}}
											</span>
										</span> -->
									</div>
								</div>
							</div>
						</div>
					</div>
					<div
						class="lia_t_top"
						style="display: flex; justify-content: space-around"
						v-if="state.reference"
					>
						<div class="colItem2">
							<div class="item2">
								<!-- <span v-for="v in taskStatusOptions" :key="v.value">
									<span v-if="v.value == state.taskStatus">{{ v.label }}</span>
								</span> -->
							</div>
						</div>
						<div class="colItem3">
							<div class="item">
								<span>邀请服务单位信息审批</span>
								<span class="icon_jt_b">
									<svg-icon icon-class="project-detail-icon-up" class="icon" />
								</span>
							</div>
						</div>
						<div>
							<span class="icon_jt_r">
								<svg-icon icon-class="project-detail-icon-left" class="icon" />
							</span>
						</div>
						<div class="colItem4">
							<div class="itemBox">
								<div class="item">
									<div class="lia">
										实际完成时间：
										<span class="lia_span">{{
											filtersTime(state.serviceEndTime)
										}}</span>
									</div>
								</div>
								<div class="btnBox">
									<a
										href="javascript:void(0);"
										@click="toPath(state.tenderTaskId, '查看服务审批单')"
									>
										<span class="btn"> 查看审批单 </span>
									</a>
								</div>
							</div>
						</div>
					</div>

					<div v-for="(item, index) in state.flowList" :key="index">
						<div style="display: flex; justify-content: space-around">
							<div class="colItem2">
								<div class="item" v-if="item.actionId !== '6'">
									<span v-for="v in nodeStatusOptions" :key="v.value">
										<span v-if="v.value == item.nodeStatus">{{ v.label }}</span>
									</span>
								</div>
								<div class="item_" v-else></div>
							</div>
							<div class="colItem3">
								<div class="item">
									<span>{{ item.nodeName }}</span>
									<el-button
										size="small"
										v-if="item.isTermination == 2"
										@click="
											visible = true;
											terminateForm.disabled = true;
										"
										class="m-l5 terminateClass button_delete"
										>流标</el-button>
									<span
										class="icon_jt_b"
										v-if="index !== state.flowList.length - 1"
									>
										<svg-icon
											icon-class="project-detail-icon-up"
											class="icon"
										/>
									</span>
								</div>
							</div>
							<div>
								<span class="icon_jt_r">
									<svg-icon
										icon-class="project-detail-icon-left"
										class="icon"
									/>
								</span>
							</div>
							<div class="colItem4">
								<div class="itemBox">
									<div class="item">
										<!-- <div class="lia">
										实际开始时间：
										<span class="lia_span">{{ item.realStartTime }}</span>
									</div> -->
										<div class="lia" v-show="item.nodeStatus == 2">
											实际完成时间：
											<span class="lia_span">{{
												filtersTime(item.realEndTime)
											}}</span>
										</div>
									</div>
									<div class="btnBox" v-if="item.actionId === '1'">
										<a
											href="javascript:void(0);"
											@click="toPath(item, '发起招标（比选）文件审批')"
											v-if="item.nodeStatus == -1"
										>
											<span class="btn"> 发起招标（比选）文件审批 </span>
										</a>
										<a
											href="javascript:void(0);"
											@click="toPath(item, '查看发起招标（比选）文件审批')"
											v-if="item.nodeStatus != -1"
										>
											<span class="btn"> 查看审批单 </span>
										</a>
									</div>
									<div class="btnBox" v-if="item.actionId === '2'">
										<a
											href="javascript:void(0);"
											v-if="item.nodeStatus == -1"
											@click="toPath(item, '发起中标（选）结果审批')"
										>
											<span class="btn"> 发起中标（选）结果审批 </span>
										</a>
										<a
											href="javascript:void(0);"
											@click="toPath(item, '查看中标（选）结果公示审批')"
											v-if="item.nodeStatus != -1"
										>
											<span class="btn"> 查看审批单 </span>
										</a>
									</div>

									<div class="btnBox" v-if="item.actionId === '3'">
										<a
											href="javascript:void(0);"
											v-if="item.nodeStatus == -1"
											@click="clickNotice(item, 'edit')"
										>
											<span class="btn"> 上传通知书（已签章） </span>
										</a>
										<a
											href="javascript:void(0);"
											@click="clickNotice(item, 'view')"
											v-if="item.nodeStatus != -1"
										>
											<span class="btn"> 查看通知书 </span>
										</a>
									</div>

									<div class="btnBox" v-if="item.actionId === '4'">
										<a
											href="javascript:void(0);"
											v-if="item.nodeStatus == -1"
											@click="toPath(item, '发起合同审批')"
										>
											<span class="btn"> 发起合同审批 </span>
										</a>
										<a
											href="javascript:void(0);"
											@click="toPath(item, '查看合同审批')"
											v-if="item.nodeStatus != -1"
										>
											<span class="btn"> 查看审批单 </span>
										</a>
									</div>
									<div class="btnBox" v-if="item.actionId === '5'">
										<a
											href="javascript:void(0);"
											v-if="item.nodeStatus == -1"
											@click="handleUpload(item)"
										>
											<span class="btn"> 上传合同扫描件 </span>
										</a>
										<a
											href="javascript:void(0);"
											v-if="item.nodeStatus != -1"
											@click="handleDown(item)"
										>
											<span class="btn"> 下载合同扫描件 </span>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="colItem5">
					<el-button @click="toPath('aaa', '查看详情')" class="button_edit">查看请示详情</el-button>
				</div>
			</div>
			<el-button
				class="approval-button button_delete"
				v-if="bidFlag"
				@click="
					visible = true;
					terminateForm.disabled = false;
				"
				>确认任务流标</el-button>
		</div>

		<!-- 甘特图 -->
		<div class="timeTask">
			<div class="title">任务执行时间表</div>
			<ProjectGantt2
				v-if="state.dataList.length > 0"
				:ganttList="state.dataList"
				type="任务执行"
			></ProjectGantt2>
		</div>

		<!-- 通知书弹出层 -->
		<EstablishmentDialog
			:noticeData="noticeData"
			ref="noticeDialogRef"
			@config="config"
		></EstablishmentDialog>

		<!-- 合同账单明细弹出层 -->
		<ContractStatement ref="contractDialogRef"></ContractStatement>

		<!-- 上传合同附件 -->
		<uploadcontractDialog
			ref="uploadRef"
			:type="noticeData.type"
			@config="config"
		></uploadcontractDialog>

		<!-- 终止流程 -->
		<public-dialog
			:title="'终止流程'"
			:width="'30%'"
			v-model:visible="visible"
			v-model:confirmDisabled="confirmDisabled"
			@onConfirm="onConfirm"
		>
			<div class="public-dialog-content d-flex j-center a-center">
				<el-form
					:inline="true"
					ref="terminateFef"
					:model="terminateForm"
					class="demo-form-inline"
				>
					<el-form-item
						label="终止原因"
						prop="terminate"
						:rules="{
							required: true,
							message: '请输入终止原因',
							trigger: 'blur',
						}"
					>
						<el-input
							v-model="terminateForm.terminate"
							type="textarea"
							:disabled="terminateForm.disabled"
							:rows="3"
							placeholder="请输入终止原因"
						></el-input>
					</el-form-item>
				</el-form>
			</div>
		</public-dialog>
	</div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import PublicTable from "@/components/PublicTable.vue";
import {
	ref,
	reactive,
	onMounted,
	watch,
	onUnmounted,
	onBeforeUnmount,
	computed,
} from "vue";
import { useStore } from "vuex";
import uploadcontractDialog from "./components/upload.vue";
import EstablishmentDialog from "./components/EstablishmentDialog.vue";
import { processApi } from "@/api/biddingProject";
import ProjectGantt2 from "./components/gantt_chart";
import {
	nodeStatusOptions,
	competitiveBiddingStatusOptions,
	taskStatusOptions,
} from "@/common/dict/dictCollect";
import ContractStatement from "@/views/tenderProjectManage/contract/component/ContractStatement.vue";
import PublicDialog from "@/components/PublicDialog.vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { GetDateDiff, getDiffDay } from "@/common/utils/GlobalUtils";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
const store = useStore();
const router = useRouter();
const route = useRoute();
const tenderTaskId = getURLhandler(route.path).tenderTaskId;
const bidFlag = ref(false);
const state = reactive({
	dataList: [],
});
const projectTaskList = reactive({
	options: store.state.common.tenderType,
	deptList: store.state.common.deptList,
});
const filtersTime = (time) => {
	return time ? time.slice(0, 10) : "0000-00-00";
};

// 获取公共流程信息
const getManageDetailInfo = () => {
	processApi.getManageDetailInfo(tenderTaskId).then((res) => {
		if (res.code === "200") {
			for (let key in res.data) {
				state[key] = res.data[key];
			}
			state.dataList = [];
			state.flowList.forEach((v) => {
				if (v.actionId == 1 && v.nodeStatus == 2) {
					bidFlag.value = true;
				}
				if (v.actionId == 3 && v.nodeStatus == 2) {
					bidFlag.value = false;
				}
				const obj = {
					taskName: state.taskName,
					text: v.nodeName,
					nodeName: v.actionResult,
					// duration: GetDateDiff(v.realStartTime, v.realEndTime),
					duration: getDiffDay(v.realStartTime, v.realEndTime),
					// end_date: new Date(v.realEndTime),
					// start_date: new Date(v.realStartTime),
					start_date: new Date(filtersTime(v.realStartTime) + " 00:00:00"),
				};
				if (getDiffDay(v.realStartTime, v.realEndTime) != 0) {
					state.dataList.push(obj);
				}
			});
		}
	});
};

const config = () => {
	getManageDetailInfo();
};

const dataListShow = ref(false);

const getTypeList = () => {
	if (store.state.common.tenderType.length === 0) {
		processApi.getTypeList().then((res) => {
			if (res.code == 200) {
				projectTaskList.options = res.data;
				store.commit("set_tenderType", res.data);
			}
		});
	} else {
		projectTaskList.options = store.state.common.tenderType;
	}
};

const getDeptList = () => {
	if (store.state.common.deptList.length === 0) {
		processApi.getDeptList().then((res) => {
			if (res.code == 200) {
				projectTaskList.deptList = res.data;
				store.commit("set_deptList", res.data);
			}
		});
	} else {
		projectTaskList.deptList = store.state.common.deptList;
	}
};

const visible = ref(false);
const confirmDisabled = ref(false);
const terminateFef = ref(null);
const terminateForm = reactive({
	terminate: "",
	disabled: false,
});

const onConfirm = () => {
	terminateFef.value.validate((valid, fields) => {
		if (valid) {
			processApi
				.terminate({
					tenderTaskId: state.tenderTaskId,
					reason: terminateForm.terminate,
				})
				.then((res) => {
					if (res.code == 200) {
						ElMessage.success("操作成功!");
						visible.value = false;
						getManageDetailInfo();
					} else {
						confirmDisabled.value = true;
					}
				});
		}
	});
};

const page = reactive({
	total: 0,
	current: 1,
	size: 50,
});

const tableOption = ref([
	{ label: "招标项目任务名称", prop: "taskName" },
	{ label: "实施流程节点 ", prop: "nodeName" },
	{ label: "工期", prop: "duration" },
]);

const onPageChange = (e) => {
	page.current = e.page;
	page.size = e.limit;
	let param = {
		param: {
			queryName: "",
		},
		pageNum: page.current,
		pageSize: page.size,
	};
};

/* 查看编辑通知书弹出 */
const noticeDialogRef = ref(null);
const noticeData = reactive({
	title: "查看",
	type: "上传",
});
const clickNotice = (item, type) => {
	noticeDialogRef.value.getApplyWinNoticeInfo({
		tenderTaskId: item.tenderTaskId,
		businessId: item.businessId || "",
	});
	noticeDialogRef.value.open();

	if (type === "edit") {
		noticeData.title = "编制";
	} else {
		noticeData.title = "查看";
	}
};

/* 合同账单明细弹出层 */
const contractDialogRef = ref(null);
const handleContractOpen = () => {
	contractDialogRef.value.open(tenderTaskId);
};

// 路由跳转
const toPath = (item, key) => {
	console.log(item);
	switch (key) {
		case "查看服务审批单":
			router.push({
				path:
					"/tender/collaborativeApprovalManagement/tenderServiceUnitDetails/tenderTaskId=" +
					item,
				// query: {
				// 	pageType: "view",
				// },
			});
			break;
		case "发起招标（比选）文件审批":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"edit"}&businessId=${item.businessId || ""}`,
			});
			break;
		case "查看发起招标（比选）文件审批":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"view"}&businessId=${item.businessId || ""}`,
			});
			break;
		case "发起中标（选）结果审批":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderRegisterDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"edit"}&businessId=${item.businessId || ""}`,
			});
			break;
		case "查看中标（选）结果公示审批":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderRegisterDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"view"}&businessId=${item.businessId || ""}`,
			});
			break;
		case "发起合同审批":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderContractDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"edit"}&businessId=${item.businessId || ""}`,
			});
			break;
		case "查看合同审批":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderContractDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"view"}&businessId=${item.businessId || ""}`,
			});
			break;
		case "查看详情":
			window.open(state.taskSourceLink);
			break;

		default:
			break;
	}
};
const uploadRef = ref(null);
// 上传合同扫描件
const handleUpload = (item) => {
	uploadRef.value.getAnnex({
		tenderTaskId: item.tenderTaskId,
		businessId: item.businessId,
	});
	noticeData.type = "上传";
	uploadRef.value.open();
};

// 下载合同扫描件
const handleDown = (item) => {
	uploadRef.value.getAnnex({
		tenderTaskId: item.tenderTaskId,
		businessId: item.businessId,
	});
	noticeData.type = "下载";
	uploadRef.value.open();
};

watch(visible, (value) => {
	if (!value) {
		terminateForm.terminate = "";
		terminateForm.disabled = false;
		confirmDisabled.value = false;
	}
});

onMounted(() => {
	getManageDetailInfo();
	getTypeList();
	getDeptList();
});
</script>

<style lang="scss" scoped>
@import "./css/taskExecuteManageDetail.scss";
</style>
